<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
  <div class="wrapper" *ngIf="nodata">
    <div class="">
      <div class="text-center mv-lg">
        <h1 class="mb-lg">
          <i class="anticon anticon-shopping-cart" style="font-size:7rem; color: #909fa7"></i>
        </h1>
        <div style="font-size:1.2rem; font-weight: 700!important;color: #6c777d;margin-bottom: 15px">Your Shopping Cart
          is empty.
        </div>
        <p class="lead m0">
          <button nz-button nzGhost nzType="primary" [routerLink]="['/pop/product']">
            <i class="anticon anticon-arrow-left"></i>Continue shopping
          </button>
        </p>
      </div>
    </div>
  </div>
  <div *ngIf="!nodata" nz-row nzGutter="16">

    <div nz-col nzSpan="18">
      <ng-container *ngFor="let order of list">
        <ng-template #infoTemplate>
          <span class="mr-lg">Exw: <strong>${{order.exw.toFixed(2)}}</strong></span>
          <span class="mr-lg">Cif: <strong>${{order.cif.toFixed(2)}}</strong></span>
          <span>(<strong>{{order.qty}}</strong>) items</span>
        </ng-template>
        <ng-template #editAction>
          <button style="margin-left: 30px;" nz-button nzType="default" [routerLink]="['/pop/product']">
            <i class="anticon anticon-arrow-left"></i>Continue shopping
          </button>

          <button (click)="removeHead(order, list)" nz-button nzType="default" style="float: right;margin-right: 30px;">
            Cancel
          </button>
          <button nz-button nzType="primary" style="float: right; " (click)="sumbitCart(order)">
            <i class="anticon anticon-upload"></i>Submit Order
          </button>
        </ng-template>
        <nz-card *ngIf="!(order.qty==0)" [id]="order.brand" [nzTitle]="order.brand | brandEnPipe |uppercase" [nzExtra]="infoTemplate" [nzActions]="[editAction]">
          <nz-list
            [nzDataSource]="order.detail"
            [nzItemLayout]="'horizontal'"
            [nzRenderItem]="item">
            <ng-template  #item let-item >
              <nz-list-item  *ngIf="!(item.qty == 0)" [nzContent]="nzContent" [nzActions]="[editAction]">
                <ng-template #editAction><a (click)="remove(item, order,list)"><i class="anticon anticon-delete"></i></a>
                </ng-template>
                <ng-template #nzContent>
                  <table>
                    <tr>
                      <td></td>
                      <td></td>
                      <td style="text-align: center">CIF</td>
                      <td align="center">EXW</td>
                    </tr>
                    <tr>
                      <td style="width: 68px;"><span class="mr-md" style="line-height: 32px;"><small>U/P</small></span>
                      </td>
                      <td>
                        <nz-input-number style="width: 64px;" [(ngModel)]="item.qty" [nzStep]="1" [nzMin]="0"
                                         (ngModelChange)="qtyChange(item, order, $event)"></nz-input-number>
                      </td>
                      <td>
                        <h3 class="ml-md mr-md" style="color: #ff6969;line-height: 32px;">
                          ${{(item.exw * item.qty).toFixed(2)}}
                        </h3>
                      </td>
                      <td>
                        <h3 class="ml-md mr-md" style="color: #ff6969;line-height: 32px;">
                          ${{(item.cif * item.qty).toFixed(2)}}
                        </h3>
                      </td>
                    </tr>
                  </table>
                </ng-template>
                <nz-list-item-meta
                  [nzTitle]="nzTitle"
                  [nzAvatar]="nzAvatar"
                  [nzDescription]="nzDescription">
                  <ng-template #nzAvatar>
                    <div class="cart-product-imitation">
                      <img *ngIf="item.img" style="max-width:135px;height: 100%" src="{{(imgSuffix + item.img)}}">
                      <img *ngIf="!item.img" style="max-width:135px" src="{{defaultUrl}}">
                    </div>
                  </ng-template>
                  <ng-template #nzTitle>
                    <span class="display-3">{{item.sap}}</span>
                    <small style="margin-left: 10px;">
                      <nz-tag [nzColor]="'blue'">{{item.brand | brandEnPipe | uppercase}}</nz-tag>
                    </small>
                  </ng-template>
                  <ng-template #nzDescription>
                    <table>
                      <tr>{{item.sku}}</tr>
                      <tr>
                        <td><span class="mr-md text-right text-sm">G.W: {{item.grossWeight}}Kg</span></td>
                        <td><span class="mr-md text-right text-sm">N.W: {{item.netWeight}}Kg</span></td>
                        <td><span class="mr-md text-right text-sm">Exw: ${{item.exw}}</span></td>
                        <td><span class="mr-md text-right text-sm">Cif: ${{item.cif}}</span></td>
                      </tr>
                    </table>
                  </ng-template>
                </nz-list-item-meta>
              </nz-list-item>
            </ng-template>
          </nz-list>
        </nz-card>
      </ng-container>
    </div>
    <div nz-col nzSpan="6">
      <nz-card [nzTitle]="'Cart Summary'">
          <span>
              Total Price
          </span>
        <h2 class="font-bold"><span style="font-size: small">Exw: </span>${{totalExwPrice.toFixed(2)}}</h2>
        <h2 class="font-bold"><span style="font-size: small">Cif: </span>${{totalCifPrice.toFixed(2)}}</h2>
        <nz-divider></nz-divider>
        <span>
              Total Qty
          </span>
        <h2 class="font-bold">
          {{total}}
        </h2>
      </nz-card>
      <nz-affix [nzOffsetTop]="120">
        <nz-card [nzBordered]="false">
          <nz-anchor>
            <nz-link *ngFor="let order of list" nzHref="#{{order.brand}}" [nzTitle]="order.brand|brandEnPipe|uppercase"></nz-link>
          </nz-anchor>
        </nz-card>
      </nz-affix>
    </div>

  </div>
</nz-spin>
